<template>
  <div>
    <!-- 分类级联筛选 -->
    <CategorySearch></CategorySearch>
    <el-card>
      <!-- 属性列表 -->
      <div v-show="scene == 0" class="scene-wrap">
        <div class="wu-table-top-area">
          <el-button
            type="primary"
            icon="plus"
            :disabled="!categoryStore.c3Id"
            @click="addAttr"
          >
            添加属性
          </el-button>
        </div>
        <el-table :data="attrData">
          <el-table-column label="序号" prop="id" width="120"></el-table-column>
          <el-table-column
            label="属性名称"
            prop="attrName"
            width="120"
          ></el-table-column>
          <el-table-column label="属性值" prop="attrValueList">
            <template #="{ row }">
              <el-tag
                class="table-tag"
                v-for="item in row.attrValueList"
                :key="item.id"
              >
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="id" width="160">
            <template #default>
              <el-button icon="edit"></el-button>
              <el-button icon="delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 操作表单：添加/修改属性 -->
      <div v-show="scene == 1" class="scene-wrap">123</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getAttrList } from '@/apis/goods'
import useCategoryStore from '@/store/modules/category'
import { attrListInt } from '@/types/goods'

const categoryStore = useCategoryStore()
watch(
  () => categoryStore.c3Id,
  (val) => {
    console.log('categoryStore.c3Id', val)
    getAttrListFun()
  }
)
// 获取属性数据
const attrData = ref<attrListInt[]>([])
const getAttrListFun = async () => {
  attrData.value = []
  if (categoryStore.c3Id) {
    const res = await getAttrList({
      category1Id: categoryStore.c1Id!,
      category2Id: categoryStore.c2Id!,
      category3Id: categoryStore.c3Id
    })
    attrData.value = res.data
  }
}

// 0列表 1操作
const scene = ref<0 | 1>(0)
const addAttr = () => {
  scene.value = 1
}
</script>

<style scoped>
.category-card {
  margin-bottom: 16px;
}

.table-tag {
  margin: 5px;
}
</style>
